<template>
	<view>
		<u-navbar back-text="返回" title="新手指引"></u-navbar>
		<view class="content">
			<view class="block step-1">
			1
			</view>
			<view class="block step-2">
			2
			</view>
			<view class="block step-3">
			3
			</view>
		</view>
		<view class="guide" @touchmove.stop.prevent="moveHandle" v-if="showGuide">
			<view :style="[getStyle]" class="guide-box" catchtouchmove="true">
				<view :style="{width:getStyle.dashedWidth,height:getStyle.dashedHeight}" class="dashed-line"></view>
				<view class="tips" :style="{ left: guideInfo.tipStyle.left,top:getStyle.tipTop }">
					<view class="text">{{ guideInfo.tips }}</view>
					<view class="next">
						<text @click="next">{{ guideInfo.next }}</text>
					</view>
				</view>
				<view class="arrow" :style="{top:getStyle.arrowTop}"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			guideList: [
				{
					el: '.step-1', // 需要高亮的元素，这里最好唯一
					tips: '点击这里，加入神奇的左汪右喵世界', // 提示文字
					next: '下一步', // 下一步按钮显示文字
					align:"bottom",
					style: {
						// 高亮样式
						borderRadius: '12rpx',
					},
					tipStyle: {
						// tips样式
						left: '60rpx'
					}
				},
				{
					el: '.step-2',
					tips: '点击这里，快速记录小可爱成长的点点滴滴',
					next: '下一步',
					align:"bottom",
					style: {
						borderRadius: '12rpx',
					},
					tipStyle: {
						left: '-100rpx'
					}
				},
				{
					el: '.step-3',
					tips: '点击这里，是小可爱的智能硬件仓库',
					next: '下一步',
					align:"top",
					style: {
						borderRadius: '12rpx',
					},
					tipStyle: {
						left: '-200rpx'
					}
				}
			],
			index: 0, // 当前展示的索引
			showGuide: true // 是否显示引导
		};
	},
	computed: {
		guideInfo() {
			return this.guideList[this.index];
		},
		getStyle() {
			const { width, height, left, top,align, style } = this.guideInfo;
			let baseLength=200 // 高亮区域默认宽度
			let sign=align=="top"?"-":"" // 当align为top时，提示弹窗展示在上面
			let arrowTop=align=="top"?"-40rpx":(height?(Number(height)*2+20 ):baseLength+20)+"rpx"
			let tipTop=align=="top"?"-"+this.tipsHeight*2-30+"rpx":(height?(Number(height)*2+30 ):baseLength+30)+"rpx"
			return {
				width: (width?(Number(width)*2):baseLength)+"rpx",
				height: (height?(Number(height)*2):baseLength)+"rpx",
				left: left + 'px',
				top: top + 'px',
				dashedWidth:(width?(Number(width)*2+20):baseLength+20)+"rpx",
				dashedHeight:(height?(Number(height)*2+20):baseLength+20)+"rpx",
				arrowTop:arrowTop,
				tipTop:tipTop,
				boxShadow: 'rgba(33,33,33,0.8) 0px 0px 0px 0px ,rgba(33,33,33,0.5)  0px 0px 0px 5000px',
				...style,
			};
		}
	},
	mounted() {
		// const guide = uni.getStorageSync('guide_key');
		const guide = false;
		if (!guide) {
			this.getDomInfo();
		} else {
			this.showGuide = false;
		}
	},
	methods: {
		getDomInfo() {
			const { el } = this.guideInfo;
			const query = uni.createSelectorQuery().in(this.$root);
			setTimeout(() => {
				query
					.select(el)
					.boundingClientRect(data => {
						if (data) {
							const index = this.index;
							const offset=3
							let width=data.width+offset*2
							let height=data.height+offset*2
							// #ifdef APP-PLUS
							width=data.width+offset*3.5
							height=data.height+offset*3.5
							// #endif

							this.guideList.splice(index, 1, {
								...this.guideList[index],
								left: data.left-offset,
								top: data.top-offset,
								width: width,
								height: height
							});
						}
					})
					.exec();
					query
						.select(".tips")
						.boundingClientRect(data => {
							if (data) {
								this.tipsHeight=data.height
							}
						})
						.exec();
			}, 10);
		},
		next() {
			if (this.index === this.guideList.length - 1) {
				this.showGuide = false;
				uni.setStorageSync('guide_key', 'true');
			} else {
				this.index += 1;
				this.getDomInfo();
			}
		},
		moveHandle() {
			return false;
		}
	}
};
</script>

<style lang="scss" scoped>
	.block{
		width: 200rpx;
		height: 200rpx;
		margin: 2px;
		margin-bottom: 30px;
		background-color: red;
	}
	.step-2{
		margin-left: 200rpx;
		width: 150rpx;
	}
	.step-3{
		margin-left: 400rpx;
	}
.guide {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0px;
	z-index: 1000;
	.guide-box {
		position: fixed;
		z-index: 100;
		transition: all 0.2s;
		.dashed-line{
				border: 1px dashed #fff;
				border-radius: 12rpx;
				position: absolute;
				top: -12rpx;
				left: -12rpx;
		}
		.arrow {
			height: 20rpx;
			width: 20rpx;
			background: #dc5f45;
			position: absolute;
			left: 50%;
			transform: rotate(45deg);
		}
		.tips {
			background: #dc5f45;
			box-shadow: 0px 2px 9px 0px rgba(0, 0, 0, 0.1);
			color: #fff;
			position: absolute;
			left: -50%;
			padding: 15rpx 20rpx;
			font-size: 28rpx;
			border-radius: 12rpx;
			.text {
				min-width: 400rpx;
				word-wrap: break-word;  
				word-break: normal;  
			}
			.next {
				text-align: right;
				padding-right: 0rpx;
				margin-top: 10rpx;
			}
		}
	}
}
.shadowDiv{
	box-shadow: rgba(33,33,33,0.8) 0px 0px 0px 0px ,rgba(33,33,33,0.5)  0px 0px 0px 5000px 
}
</style>
